.container {
  width: 100%;
  padding: 100px 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .content {
    width: 80%;
    display: flex;
    flex-direction: column;

    .bookBox {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px;
      border: 1px solid #666;
      background-color: #111;
      cursor: pointer;

      img {
        width: 150px;
        height: 180px;
        margin: 0 auto 10px;
      }

      p {
        margin-top: 6px;
      }
    }

    .shoppingBox {
      width: 100%;
      height: 500px;
      margin-top: 40px;
      border: 1px solid #666;

      .tableHead {
        width: 100%;
        height: 40px;
        display: flex;
        background-color: #333;
        pointer-events: none;
        .tableCell {
          display: flex;
          flex: 1;
          align-items: center;
          padding-left: 4px;
        }
      }

      .tableRow {
        display: flex;
        border-bottom: 1px solid #333;
        pointer-events: none;
        .tableCell {
          display: flex;
          flex: 1;
          align-items: center;
          padding: 4px;
        }
      }

      .total {
        display: flex;
        justify-content: flex-end;
        padding: 4px 8px;
        pointer-events: none;
      }
      .tip {
        width: 100%;
        margin-top: 40px;
        display: flex;
        justify-content: center;
        color: #999;
        font-size: 20px;
        pointer-events: none;
      }
    }
  }
}
